<template>
	<!-- :style="{paddingTop: `${search.height+search.top+10}px`}" -->
	<view v-if="detail" class="pages_intelligence" :style="{paddingTop: `${search.height+search.top+10}px`}">
		<!-- <myTabs :backgroundColor="#fff"></myTabs> -->
		<myTabs :title="title" @goBlack="goBlack" :mybackgroundColor="'#fff'"></myTabs>

		<view class="pages_body">
			<view class="pages_bodyHeard">
				<view class="pages_bodyHeardBox">
					<p class="pages_bodyHeardTitle">{{detail.categoryName}}</p>
					<h2 class="pages_bodyHeardName">{{detail.informationTitle}}</h2>
					<view class="pages_bodyHeardDate">
						<span>{{detail.author}}</span>
						<span v-if="detail&&detail.publishTime">发布于{{detail.publishTime | ff_publishTime}}</span>
					</view>
				</view>
				<u-read-more :price="detail.price" @open="open" @goMarketing="goMarketing" @unlock="unlock"
					ref="uReadMore" :toggle="isUnlock" :showHeight="contentHeight">
					<u-parse @ready="ff_ready" :previewImg="!isUnlock" id="rich" :content="detail.content"></u-parse>
				</u-read-more>
				<view class="pages_bodyHeardEnd">{{detail.readNum}} 阅读</view>
			</view>

			<view class="pages_bodyDiscuss">
				<view class="pages_bodyDiscussHeard">
					<span>评论</span>
					<span>{{plunDetail.length}}</span>
				</view>
				<view class="pages_bodyDiscussItems" v-for="(item,index) in plunDetail" :key="index">
					<view class="pages_bodyDiscussItemsTop">
						<view class="pages_bodyDiscussItemsTopImgs">
							<image mode="aspectFill" :src="item.avatar?item.avatar: '/static/img/userTx.png'"></image>
						</view>
						<view class="pages_bodyDiscussItemsTopRight">
							<p>{{item.nickname}}</p>
							<p>{{item.createTime | ff_publishTime}}</p>
						</view>
					</view>
					<view class="pages_bodyDiscussItemsBottom">{{item.content}}</view>
				</view>
			</view>
		</view>

		<!-- 评论输入框 @click="ffClose" @click="ffClose"-->
		<view class="pinlinBoxx" v-show="isShow" @click="ffClose">
			<view @click.stop="" class="pinglunkom" :style="{bottom: `${tishiHeight}px`}">
				<textarea @click.stop="" type="text" :focus="isFocusShow" cursor-spacing=0 @blur.stop="blurTextarea"
					@focus.stop="focusTextarea" class="pinglunkomInpt" :adjust-position="false" :hold-keyboard="true"
					auto-height=true v-model="textareaValue" placeholder="说点什么吧~" :show-confirm-bar="false" />
				<view class="pinglunkomBut" @click.stop="dynamiccommentpinglun">评论</view>
			</view>
		</view>

		<!-- 评论成功 -->
		<u-overlay :show="winShow" @click="winShow = false">
			<view class="winwarpBox">
				<view class="winRect" @tap.stop>
					<image src="/static/img/winIcon.png"></image>
					<span>评论成功</span>
				</view>
			</view>
		</u-overlay>

		<!-- 底部Tabs -->
		<view class="mytbas" id="mytbas">
			<view class="mytbas_leftBox">
				<view class="mytbas_leftBoxItems" @click="pushMainCentonShareArr">
					<view class="mytbas_bubbleBox" v-if="!isHasShare">
						可分享给一个好友免费查阅
						<image src="/static/img/chaIcon.png"></image>
					</view>
					<button open-type="share" class="mypages__mainCentonShareBox">
					</button>
					<image src="/static/img/fxIcon.png"></image>
					<span></span>
				</view>
				<view v-if="detail.commentStatus" @click="ffHide" class="mytbas_leftBoxItems">
					<image src="/static/img/plIcon.png"></image>
					<span>{{plunDetail.length}}</span>
				</view>
				<view class="mytbas_leftBoxItems" @click="giveAlike">
					<image :src="detail.hasLike ? '/static/img/zanIcon_act.png' : '/static/img/zanIcon.png'"></image>
					<span>{{detail.likesNum}}</span>
				</view>
			</view>
			<view v-if="detail.studyStatus" class="mytbas_rightBox" @click="goPath">
				<view class="mytbas_rightBoxTop">我想学此菜</view>
				<view class="mytbas_rightBoxBottom">已有{{detail.study.joinNum}}人参与</view>
			</view>
		</view>
	</view>


</template>

<script>
	let that = null;
	import myTabs from "@/components/myTabs/index.vue"
	export default {
		components: {
			myTabs
		},
		data() {
			return {
				isHasShare: false,
				mytbasHeght: 0,
				isUnlock: false,
				isToggle: true,
				title: '情报标题',
				contentHeight: 0,
				tishiHeight: 0,
				isShow: false,
				isFocusShow: false,
				content: ``,
				informationId: 0,
				masterId: "",
				detail: null,
				isDetail: false,
				plunDetail: null,
				textareaValue: "",
				winShow: false,
				buyType: 20,
				isBlack: false,
				ratio: 1,
				mainCentonShareArr: []

			}
		},
		onLoad(options) {
			// #ifndef H5
			let search = uni.getMenuButtonBoundingClientRect()
			this.$store.commit('updataSearch', search);
			// #endif

			that = this;
			console.log('options--->', options)
			if (options.informationId) {
				this.informationId = options.informationId;
			}
			if (options.masterId) {
				this.isBlack = true;
			} else {
				this.isBlack = false;
			}
			this.masterId = this.user ? this.user.userId : '';
			if (options.masterId) {
				this.masterId = options.masterId;
			}
			if (options.buyType) {
				this.buyType = options.buyType;
			}
			this.init();
		},
		onShareAppMessage() {
			return {
				title: '章鱼小数据',
				path: `/package/intelligence/index?informationId=${this.informationId}&masterId=${this.masterId}`
			}
		},
		onReady() {

		},
		onShow(options) {
			if (!options) return
			this.informationId = options;
			this.init();
		},
		computed: {
			search() {
				return this.$store.state.search;
			},
			user() {
				return this.$store.state.user;
			},
		},
		filters: {
			ff_publishTime(val) {

				return that.$Tools.handleTime(val);
			}
		},
		methods: {
			pushMainCentonShareArr() {
				this.isHasShare = 1;
				console.log('pushMainCentonShareArr')
				this.mainCentonShareArr.push(this.detail.informationId)
				uni.setStorageSync('mainCentonShareArr', this.mainCentonShareArr)
			},
			ff_ready(e) {

				this.$nextTick(() => {
					setTimeout(() => {
						console.log('渲染完毕', e.height)
						this.$refs.uReadMore.init();
						this.contentHeight = e.height * this.ratio;
						this.contentHeight = this.contentHeight > 250 ? this.contentHeight : 250;


						uni.hideLoading();
					}, 4000)

				})

			},
			init() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.mainCentonShareArr = uni.getStorageSync('mainCentonShareArr') ? uni.getStorageSync(
					'mainCentonShareArr') : [];
				this.$api.informationGet({
					informationId: this.informationId,
					masterId: this.masterId
				}).then(res => {
					if (res.code == 200) {
						this.title = res.data.informationTitle;
						this.detail = res.data;
						this.detail.content = this.detail.content.replace(/\<img/gi, '<img class="myStyle"');
						this.detail.content = this.detail.content.replace(/\<p/gi, '<p class="myStyleP"');
						if (this.detail.hasCharge == 0) {
							this.isUnlock = false;
							this.isToggle = false;

						} else {
							this.isUnlock = true;
							this.isToggle = true;
						}


						this.isHasShare = this.detail.hasShare;
						this.mainCentonShareArr.forEach(item => {
							if (this.detail.informationId == item) {
								this.isHasShare = 1;
							}
						})

						this.ratio = this.isToggle ? .4 : 1;
						if (!this.detail.content) {
							uni.hideLoading();
						}

						// uni.hideLoading();
						// 请注意上方已在组件中添加ref-uReadMore
						// setTimeout(()=>{

						// },1500);

						this.initComment();
					} else if (res.code == 402) {
						uni.redirectTo({
							url: '/pages/start/index'
						})
					}
				})

			},
			initComment() {
				this.$api.informationCommentGetList({
					informationId: this.informationId
				}).then(res => {
					if (res.code == 200) {
						this.plunDetail = res.rows;
					}
				})
			},
			dynamiccommentpinglun() {
				if (!this.textareaValue) {
					uni.showToast({
						icon: 'none',
						mask: true,
						title: '请输入评论'
					})
					return
				}
				let req = {
					content: this.textareaValue,
					informationId: this.informationId
				}
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.$api.informationCommentAdd(req).then(res => {
					if (res.code == 200) {
						this.textareaValue = '';
						this.isShow = false;
						this.initComment();
						uni.hideLoading();
						this.winShow = true;
						setTimeout(() => {
							this.winShow = false;
						}, 1000)
					}
				})

			},
			giveAlike() {
				this.$api.informationLikeAdd({
					informationId: this.informationId
				}).then(res => {
					console.log('zan--->', res)
					if (res.code == 200) {
						if (res.msg == "取消点赞") {
							this.detail.likesNum--
							this.detail.hasLike = 0;
						} else {
							this.detail.likesNum++
							this.detail.hasLike = 1;
						}
						uni.showToast({
							icon: 'none',
							title: res.msg,
							mask: true
						})
					}
				})
			},
			goPath(studyId) {
				uni.navigateTo({
					url: `/package/study/index?studyId=${this.detail.study.studyId}&buyType=${this.buyType}`
				})
			},
			goMarketing() {
				uni.navigateTo({
					url: '/package/marketing/index'
				})
			},
			unlock() {

				uni.navigateTo({
					url: `/package/payment/index?informationTitle=${this.detail.informationTitle}&informationId=${this.detail.informationId}&buyType=10`
				})

			},
			goBlack() {
				let that = this;
				if (this.isBlack) {
					let location = uni.getStorageSync('location');
					if (location) {
						this.$api.userLocation({
							city: location.name
						}).then(res => {
							if (res.code == 200) {
								uni.switchTab({
									url: '/pages/index/index'
								})
							}
						})
					} else {

						uni.getFuzzyLocation({
							type: 'gcj02', //返回可以用于uni.openLocation的经纬度
							success: (res) => {
								this.$qqmapsdk.reverseGeocoder({
									//把你的经纬度
									location: {
										latitude: res.latitude,
										longitude: res.longitude
									},
									success(qqmapsdkRes) {
										let city = qqmapsdkRes.result.address_component.city.replace(
											'市', '');
										that.$api.userLocation({
											city
										}).then(res => {
											if (res.code == 200) {
												uni.setStorageSync('location', res.data
													.location);
												that.$store.commit('updatalocation', res
													.data.location);
												that.$store.commit('updataUser', res.data
													.user);

												this.$api.userLocation({
													city: res.data.location.name
												}).then(res => {
													if (res.code == 200) {
														uni.switchTab({
															url: '/pages/index/index'
														})
													}
												})


											}
										})

									}
								})

							}
						})
					}



				} else {
					uni.navigateBack();
				}
			},
			open(name) {
				console.log('name-->', name)
			},
			ffHide() {
				this.isShow = true;

				setTimeout(() => {
					this.isFocusShow = true;
				}, 100)
			},
			ffClose() {
				this.tishiHeight = 0;
				this.isShow = false;
				this.isFocusShow = false;
			},
			blurTextarea(e) {
				console.log("失去焦点了===>")
				// this.isShow = false;
				this.isShow = false;
				this.isFocusShow = false;
				this.tishiHeight = 0;
			},
			focusTextarea(e) {
				this.tishiHeight = e.detail.height <= 0 ? 0 : e.detail.height;
				console.log("this.tishiHeight===>", e.detail.height)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pages_intelligence {
		width: 100%;
		min-height: 100vh;
		background-color: #F0F0F0;
		padding-bottom: 158rpx;
		box-sizing: border-box;
	}

	/deep/.myStyle {
		width: 100% !important;
		display: block;
	}

	/deep/.myStyleP {
		padding: 0;
		margin: 0;
	}

	.pages_bodyHeard {
		padding: 32rpx;
		box-sizing: border-box;
		width: 100%;
		border-radius: 0px 0px 24rpx 24rpx;
		background-color: #fff;
	}

	.pages_bodyHeardTitle {
		height: 42rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 42rpx;
		color: #FFA102;
		background-color: #fffced;
		border-radius: 8rpx;
		display: inline-block;
		padding: 4rpx 8rpx;
	}

	.pages_bodyHeardName {
		// height: 50rpx;
		font-size: 36rpx;
		font-family: 蘋方-簡;
		font-weight: bold;
		// line-height: 50rpx;
		color: #000000;
		letter-spacing: .1rpx;
		margin-top: 20rpx;
		margin-bottom: 16rpx;
	}

	.pages_bodyHeardDate {
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;

		span {
			display: inline-block;
			height: 34rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 34rpx;
			color: #999999;
		}

		span:nth-child(1) {
			margin-right: 24rpx;
		}
	}

	.pages_bodyHeardEnd {
		margin-top: 40rpx;
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 34rpx;
		color: #999999;
	}

	.pages_bodyDiscussItemsTopRight {
		display: flex;
		flex-direction: column;
		justify-content: space-around;

		p:nth-child(1) {
			height: 34rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 34rpx;
			color: #666666;
		}

		p:nth-child(2) {
			height: 32rpx;
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 32rpx;
			color: #999999;
		}

	}

	.pages_bodyDiscussItemsBottom {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 32rpx;
		color: #333333;
		margin-top: 24rpx;
	}

	.pages_bodyDiscussItemsTop {
		display: flex;
	}

	.pages_bodyDiscuss {
		width: 100%;
		padding: 32rpx;
		box-sizing: border-box;
		border-radius: 24rpx;
		background-color: #fff;
		margin: 16rpx 0 24rpx 0;


	}

	.pages_bodyDiscussItems {
		padding: 24rpx 0;
	}

	.pages_bodyDiscussItems:not(:last-child) {
		border-bottom: 1rpx #eaeaea solid;
	}

	.pages_bodyDiscussHeard {
		display: flex;
		align-items: center;

		span:nth-child(1) {
			height: 40rpx;
			font-size: 28rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			line-height: 40rpx;
			color: #000000;
			margin-right: 12rpx;
		}

		span:nth-child(2) {
			height: 34rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 34rpx;
			color: #999999;
		}
	}

	.pages_bodyDiscussItemsTopImgs {
		width: 72rpx;
		height: 72rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 16rpx;

		image {
			width: 72rpx;
			height: 72rpx;
		}
	}

	.winwarpBox {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100vh;
	}

	.winRect {
		width: 242rpx;
		height: 242rpx;
		background: #fff;
		opacity: 1;
		border-radius: 32rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		image {
			width: 128rpx;
			height: 128rpx;
		}

		span {
			margin-top: 8rpx;
			display: inline-block;
			height: 34rpx;
			font-size: 24rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			line-height: 34rpx;
			color: #333333;
		}
	}

	.mytbas_leftBox {
		flex: 1;
		display: flex;
		justify-content: space-between;
		margin-right: 30rpx;
	}

	.mypages__mainCentonShareBox {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: transparent;
		border: none;
		outline: none;

		&::after {
			content: '';
			border: none;
			outline: none;
		}
	}

	.mytbas_leftBoxItems {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		height: 88rpx;

		image {
			width: 40rpx;
			height: 40rpx;
		}

		span {
			height: 32rpx;
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 32rpx;
			color: #666666;
		}
	}

	.mytbas_bubbleBox {
		box-sizing: border-box;
		padding: 20rpx 10rpx;
		font-size: 28rpx;
		background-color: rgba(0, 0, 0, 0.85);
		color: #fff;
		font-weight: bold;
		border-radius: 20rpx;
		position: absolute;
		top: -125%;
		left: 22%;
		width: 382rpx;
		text-align: center;
		display: flex;
		justify-content: space-between;

		&::after {
			content: '';
			width: 0;
			height: 0;
			border: 10rpx solid transparent;
			border-top: 10rpx solid rgba(0, 0, 0, 0.85);
			position: absolute;
			left: 50rpx;
			bottom: -18rpx;
		}

		image {
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
			box-sizing: border-box;
			// border: 3rpx #F0F0F0 solid;
		}
	}

	.mytbas {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		// height: 136rpx;
		padding: 24rpx 32rpx;
		background-color: #fff;
		display: flex;
		box-sizing: border-box;
		padding-bottom: 48rpx;
		box-sizing: border-box;
	}

	.mytbas_rightBox {
		flex: 0 0 288rpx;
		width: 288rpx;
		border-radius: 24rpx;
		display: flex;
		flex-direction: column;
		padding: 10rpx;
		box-sizing: border-box;
		justify-content: space-around;
		background-color: #ffda2d;

		.mytbas_rightBoxTop {
			height: 40rpx;
			font-size: 28rpx;
			font-family: 蘋方-簡;
			font-weight: bold;
			line-height: 40rpx;
			color: #000000;
			text-align: center;
		}

		.mytbas_rightBoxBottom {
			height: 28rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 28rpx;
			color: #666666;
			text-align: center;

		}
	}

	.pinlinBoxx {
		background-color: rgba(0, 0, 0, 0.45);
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		z-index: 99;
		transition: all .7;
	}

	.pinglunkom {
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 20rpx 32rpx;
		position: fixed;
		left: 0px;
		width: 100%;
		background-color: #fff !important;
		box-sizing: border-box;
		border-radius: 24rpx 24rpx 0px 0px;
	}

	.pinglunkomBut {
		width: 120rpx;
		height: 72rpx;
		opacity: 1;
		background: #FFDA2D;

		border-radius: 8rpx;
		color: #333333;
		font-size: 28rpx;
		border-radius: 24rpx;
		font-weight: bold;
		text-align: center;
		line-height: 72rpx;
		font-family: 蘋方-簡;

	}

	.pinglunkomInpt {
		flex: 1;
		margin-right: 32rpx;
		background-color: #f3f3f3;
		border-radius: 24rpx;
		padding: 16rpx;
		font-size: 28rpx;
		;

	}
</style>
